<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <!-- 首页user信息 -->
          <el-card shadow= 'hover'>
            <div class="userCard">
              <img :src="imgUrl" width="120px" height="120px"  class="avatar" style="object-fit: fill;border-radius: 50%">
              <div class="userInfo">
                <p class="important-font">{{this.showUserData.name}}</p>
                <p class="secondary-font">{{this.showUserData.account+" "+this.showUserData.userRoleName}}</p>
              </div>
            </div>
          </el-card>
          <!-- 首页表格 -->
          <el-card shadow= 'hover' class="tableInfo">
            <div slot="header">
              <span class="important-font">最近通知消息</span>
            </div>
            <div>
              <el-table border stripe :data="noticeShowData">
                <el-table-column prop="createTime" label="创建时间"  show-overflow-tooltip></el-table-column>
                <el-table-column prop="noticeType" label="通知类型">
                  <template v-slot="scope">
                    <el-tag :type="scope.row.noticeType===0?'success':'primary'">
                      {{ scope.row.noticeType === 0 ? '全体通知' : '个体通知' }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="noticeTitle" show-overflow-tooltip label="通知标题">
                  <template v-slot="scope">
                    <el-link :type="scope.row.noticeType===0?'success':'primary'" @click="showNotice(scope.row.id)">{{ scope.row.noticeTitle }}
                    </el-link>
                  </template>
                </el-table-column>

              </el-table>
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="16">
        <!-- 六个订单信息 -->
        <div class="num">
          <el-card shadow= 'hover' v-for="item in countData" :key="item.name" :body-style="{ display: 'flex',padding: 0 }" class="OrderCard">
            <i class="icon" style="text-align: center" :class="'el-icon-'+item.icon" :style="{ background: item.color}"></i>
            <div style="text-align: center">
              <p class="important-font">{{item.value+" "+item.unit}}</p>
              <p class="secondary-font">{{item.name}}</p>
            </div>
          </el-card>
        </div>
        <div class= "num graph">
          <el-card shadow="hover" style="width:100%"><div><el-calendar  v-model="value"></el-calendar></div></el-card>
        </div>
      </el-col>
    </el-row>
    <ShowNotice/>
  </div>
</template>

<script>


import { GetUserNoticeApi } from '@/request/message/notice-api'
import store from '@/store'
import ShowNotice from '@/components/notice/ShowNotice.vue'
import ImgUrl from '@/assets/image/default.jpg'
import { initMyUserInfo } from '@/request/user/user-api'
import { initHomeCount } from '@/request/Statistics/statistics-api'
export default {
  name: "Index",
  created () {
   this.initUserNotice()
    this.initMyUserInfo()
    this.initHomeCount()
  },components:{
    ShowNotice
  },
  data() {
    return {
      imgUrl:ImgUrl,
      value: new Date(),
      noticeShowData:[],
      showUserData:{},
      countData:[
        {
          name: '累计系统用户',
          value: 0,
          icon: 'user-solid',
          unit:'人',
          color: '#2ec7c9'
        },
        {
          name: '累计专家人数',
          value: 0,
          icon: 's-custom',
          unit:'人',
          color: '#ffb980'
        },
        {
          name: '累计项目数量',
          value: 0,
          icon: 's-cooperation',
          unit:'个',
          color: '#5ab1ef'
        }
      ]
    }
  },methods:{
    async initUserNotice () {
      const params={
        page:1,
        pageSize:7
      }
      let res = await GetUserNoticeApi(params)
      if (res&&res.code===200){
        this.noticeShowData=res.data.records
      }else {
        this.$message.error(res.msg?res.msg:"查询通知失败")
      }
    },
    async initMyUserInfo () {
      let res = await initMyUserInfo()
      if (res&&res.code===200){
        this.showUserData=res.data
        if (res.data.imgUrl){
          this.imgUrl= 'data:image/gif;base64,' +res.data.imgUrl
        }
      }
    },
    async initHomeCount () {
      let res = await initHomeCount()
      if (res && res.code === 200) {
        this.countData[0].value = res.data.userCount
        this.countData[1].value = res.data.expertCount
        this.countData[2].value = res.data.projectCount
      }else {
        this.$message.error("获取数据失败")
      }
    },
    showNotice (id) {
      store.commit('NoticeEdit/changeShowNoticeSync', true)
      store.commit('NoticeEdit/changeShowNoticeId', id)
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.el-card__body {
  padding: 10px;
}
.userCard{
  height: 180px;
  display: flex;
  border-bottom: 2px solid #DCDFE6;
  border-radius: 2px;
}
.userInfo{
  width: auto;
  padding: 6% 0 0 6%;
}
.important-font{
  font-weight: 800;
  font-size: 20px;
}
.secondary-font{
  color: #909399;
}
.login-info{
  height: 40px;
  text-align: left;
  color: #909399;
}
.tableInfo{
  margin: 20px 0 0 0;
}
.OrderCard{
  margin: 0 0 30px 30px;
  border: #DCDFE6 1px solid;
  border-radius: 10px;
  i{
    width: 30%;
    line-height: 120px;
    font-size: 30px;
    color:#fff
  }
  div{
    width: 300px;
  }
}
.el-card{
  border: none;
}
.num{
  display: flex;
  flex-wrap: wrap;
}
.graph{
  margin: 15px 0 0 0;
}
/deep/.el-calendar-day{
  height: 75px!important;
  text-align: center;
  line-height: 75px;
}
</style>
